<template>
  <!-- App.vue -->
  <v-app>
    <div>
      <v-app-bar>
        <v-row class="fill-height" justify="center" align="center" style="font-size: larger">
          镇川碗托
        </v-row>
      </v-app-bar>

    </div>
    <v-main>
      <!-- 给应用提供合适的间距 -->
      <v-container>
        <v-card>
          <v-responsive :aspect-ratio="16/9">

            <v-form ref="form" v-model="valid">
              <v-container>
                <v-row justify="center">
                  <v-col cols="16" md="3">
                    <v-select
                        v-model="order.community"
                        :items="community_items"
                        :rules="[v => !!v || '小区不能为空!']"
                        label="小区"
                    ></v-select>
                  </v-col>
                </v-row>
                <v-row justify="center">
                  <v-col cols="16" md="3">
                    <v-text-field
                        v-model="order.name"
                        :rules="[v => !!v || '姓名不能为空!']"
                        label="姓名"
                        required
                    ></v-text-field>
                  </v-col>
                </v-row>

                <v-row justify="center">
                  <v-col cols="16" md="3">
                    <v-text-field
                        v-model="order.phone"
                        :rules=phoneRules
                        label="电话号码"
                        required
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row justify="center">
                  <v-col cols="16" md="3">
                    <v-text-field
                        v-model="order.address"
                        :rules="[v => !!v || '详细地址不能为空!']"
                        label="详细地址"
                        required
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row justify="center">
                  <v-col cols="16" md="3">
                    <v-text-field
                        v-model="order.amount"
                        :rules=amountRules
                        label="数量"
                        required
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-btn
                    :loading="loading"
                    :disabled="!valid"
                    class="ma-1"
                    color="success"
                    block
                    @click="commit">
                  提交
                </v-btn>
              </v-container>
            </v-form>
          </v-responsive>
        </v-card>
      </v-container>
    </v-main>

    <v-footer app>
      <!-- -->
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: 'Home',
  data: () => ({
        valid: false,
        order: {
          id: null,
          community: null,
          name: '',
          phone: '',
          address: '',
          amount: 0,
        },
        community_items: [
          '高新领域',
          '融侨鑫苑'
        ],
        amountRules: [
          v => v > 3 || '最少订购3个',
        ],
        phoneRules: [
          v => /^1[3|4|5|7|8]\d{9}$/.test(v) || '电话号码格式不正确!',
        ],
        landscape: false,
        loading: false
      }
  ),
  props: {
    msg: String
  }
  ,
  methods: {
    validate() {
      this.$refs.form.validate()
    },
    async commit() {
      let that = this
      this.validate()
      this.loading = true
      that.$axios({
        method: 'post',
        url: this.global.order_server_url + '/order/save',
        headers: {'Content-Type': 'application/json'},
        data: JSON.stringify(this.order)
      }).then((response) => {
        let code = response.data.code
        if (code == 200) {
          console.log(response.data)
          this.loading = false
        } else {
          console.log(response.data)
        }
        alert("下单成功,如订单信息有变更,请与我联系! 朱鹏:15991341026")
        //请求成功返回的数据
      }).catch((error) => {
        this.loading =true
        console.log(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#label {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: red;
  font-size: 20px;
}
</style>

<!--                :disabled="!valid"-->